<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
    <title>Go-Supervisor</title>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" href="css/bootstrap-table.css"/>
    <link rel="stylesheet" href="css/bootstrap-dialog.min.css"/>
    <script src='js/jquery-3.3.1.min.js'></script>
    <script src='js/popper.min.js'></script>
    <script src='js/bootstrap.min.js'></script>
    <script src='js/bootstrap-table.min.js'></script>
    <script src='js/bootstrap-dialog.min.js'></script>
  </head>
  
        
  <script type="text/javascript">
  var columns = [{
        field: 'name',
        title: 'Program'
    }, {
        field: 'statename',
        title: 'State'
    }, {
        field: 'description',
        title: 'Description'
    }, {
       field: 'action',
       title: 'Action'
    }];

  var programs = []

  function changeProgramState( name, statename ) {
      for( var i = 0; i < programs.length; i++ ) {
          if( name == programs[i]['name'] ) {
              programs[i]['statename'] = statename;
          }
      }
  }

  function refreshDisplay() {
      reformatPrograms( programs );
      $("#programs").bootstrapTable('destroy');
      $("#programs").bootstrapTable({
                   data: programs
                   });

  }

  function startProgram( name ) {
    $.ajax( {
    type: "POST",
    dataType: "json",
    url: "/program/start/" + name, 
    success: function( data, status, jqXHR  ) {
        if( data['success'] ) {
            changeProgramState( name, "RUNNING" );
            refreshDisplay();
          } else {
            confirm_dialog( { 'title': "Information",
                              'message': "Fail to start program, please check the log of supervisord to find reason",
                              'cancel-text': "Cancel",
                              'cancel-hide': true,
                              'confirm-text': "Ok",
                              'confirm-onclick': function() {}
                              } );

          }
    },
    error: function( jqXHR, status, errorThrown ) {
           confirm_dialog( { 'title': "Information",
                             'message': "Fail to start program, please check if supervisord is started or not",
                             'cancel-text': "Cancel",
                             'cancel-hide': true,
                             'confirm-text': "Ok",
                             'confirm-onclick': function() {}
                             } );

    }
    });
  };

  function stopProgram( programName ) {
      confirm_dialog( { 'title': "Stop confirmation",
                        'message': "Do you really want to stop program?",
                        'cancel-text': "Cancel",
                        'confirm-text': "Stop",
                        'confirm-onclick': function() {
                            doStopProgram( programName );
                        }
                        } );
  }
  function doStopProgram( name ) {
      $.ajax( {
      type: "POST",
      dataType: "json",
      url: "/program/stop/" + name,
      success: function( data, status, jqXHR  ) {
          if( data['success'] ) {
              changeProgramState( name, 'STOPPED' );
              refreshDisplay();
          } else {
              confirm_dialog( { 'title': "Information",
                                'message': "Fail to stop program, please check the log of supervisord",
                                'cancel-text': "Cancel",
                                'cancel-hide': true,
                                'confirm-text': "Ok",
                                'confirm-onclick': function() {
                                }
                                } );

          }
      },
      error: function( jqXHR, status, errorThrown ) {
		confirm_dialog( { 'title': "Information",
                        'message': "Fail to stop program, please check if supervisord is running",
                        'cancel-text': "Cancel",
                        'cancel-hide': true,
                        'confirm-text': "Ok",
                        'confirm-onclick': function() {
                        }
                        } );

      }

      });
  }

  function reformatPrograms( programs ) {
      for( var i in programs ) {
          var statename = programs[i]['statename'];
          var action = "";
          var color = "";
          if( statename.indexOf("RUNNING") >= 0 || statename.indexOf( "STARTING") >= 0 ) {
            action = '<button type="button" disabled class="btn btn-primary mr-1" onclick="startProgram(\'' + programs[i]['name'] + '\');">Start</button>';
            action = action + '<button type="button" class="btn btn-primary" onclick="stopProgram(\'' + programs[i]['name'] + '\');">Stop</button>';
            color = "green";
          } else {
              action = '<button type="button" class="btn btn-primary mr-1" onclick="startProgram(\'' + programs[i]['name'] + '\');">Start</button>';
              action = action + '<button type="button" disabled class="btn btn-primary" onclick="stopProgram(\'' + programs[i]['name'] + '\');">Stop</button>';
              color = "red";

          }

          programs[i]['action'] = action;
          programs[i]['statename'] = '<div style="background-color:' + color + ';">' + statename + '</div>';
      }
  };

  function confirm_dialog( confirm ) {
        $('#my-modal-title').text(confirm['title'] );
        $('#my-modal-message').text( confirm['message'] );
        $('#my-modal-cancel-btn').text( confirm['cancel-text'] );
        $('#my-modal-confirm-btn').text( confirm['confirm-text'] );
        $('#my-modal-confirm-btn').unbind( 'click' );
        if( confirm.hasOwnProperty( 'cancel-hide') && confirm['cancel-hide'] ) {
            $('#my-modal-cancel-btn').hide();
        } else {
            $('#my-modal-cancel-btn').show();
        }
        $('#my-modal-confirm-btn').click( confirm['confirm-onclick'] );
        $("#myModal").modal('show');

  }

  function shutdown_supervisor() {
      confirm_dialog( { 'title': "Shutdown confirmation",
                        'message': "Do you really want to shutdown supervisor?",
                        'cancel-text': "Cancel",
                        'confirm-text': "Shutdown",
                        'confirm-onclick': function() {
                            $.ajax( {
                                     type: "PUT",
                                     url: "/supervisor/shutdown",
                                     contentType: "application/json",
                                     dataType: "text",
                                     success: function( data, status, jqXHR ) {
                                     },
                                     error: function( jqXHR, textStatus, errorThrown ) {
                                     }
                            });

                        }
                        } );

  };

  function reload_supervisor() {
      confirm_dialog( { 'title': "Reload confirmation",
                        'message': "Do you really want to reload supervisor?",
                        'cancel-text': "Cancel",
                        'confirm-text': "Reload",
                        'confirm-onclick': function() {
                            $.ajax( {
                                      type: "POST",
                                      url: "/supervisor/reload",
                                      contentType: "application/json",
                                      dataType: "text",
                                      success: function( data, status, jqXHR ) {
                                          list_programs();
                                      },
                                      error: function( jqXHR, textStatus, errorThrown ) {
                                          list_programs();
                                      }
                            });

                        }
                        } );
  }

  function get_selected_programs() {
      selected = $("#programs").bootstrapTable('getSelections');
      programs = [];
      for(i in selected) {
          programs.push( selected[i]['name'] );
      }
      return programs;

  }
  function start_select() {
      programs = get_selected_programs();
      if( programs.length <= 0 ) {
          alert( "no program selected" );
          return;
      }
      $.ajax( {
          type: "POST",
          url: "/program/startPrograms",
          contentType: "application/json",
          data: JSON.stringify( programs ),
          dataType: "text",
          success: function( data, status, jqXHR ) {
            list_programs();           
          },
          error: function( jqXHR, textStatus, errorThrown ) {
              list_programs();
          }
      });
  }

  function stop_select() {
      programs = get_selected_programs();
      if( programs.length <= 0 ) {
          alert( "no program selected" );
          return;
      }
      $.ajax( {
          type: "POST",
          url: "/program/stopPrograms",
          contentType: "application/json",
          data: JSON.stringify( programs ),
          dataType: "text",
          success: function( data, status, jqXHR ) {
              list_programs();
          },
          error: function( jqXHR, textStatus, errorThrown ) {
              list_programs();
          }
      });

  }

  function list_programs() {
      $.ajax({
              type: "GET",
              url: "/program/list",
              dataType: "json",
              success: function( data, status, jqXHR ) {
                programs = data;
                refreshDisplay();
              },
              error: function( jqXHR, textStatus, errorThrown ) {
                alert( textStatus );
              }
              });
  }

  $(document).ready(function() {
      list_programs();
  });    
  </script>
  <body>
    <H1 class="text-center text-success">Go-Supervisor</H1>
    <div class="container">
      <H2>Programs</H2>
      <div class='row'>
          <div class="col-12">
              <input type="button" class="btn btn-primary float-right mr-1" value="Shutdown" onclick='shutdown_supervisor();'>
              <input type="button" class="btn btn-primary float-right mr-1" value="Reload" onclick='reload_supervisor();'>
              <input type="button" class="btn btn-primary float-right mr-1" value="Stop Select" onclick='stop_select();'>
              <input type="button" class="btn btn-primary float-right mr-1" value="Start Select" onclick='start_select();'>
          </div>
      </div>
      <div class="table-responsive mt-3">          
       <table id="programs"
           data-toggle="table"
           data-click-to-select="true" >
           <thead>
               <th data-field="id" data-checkbox="true"></th>
               <th data-field="name">Program</th>
               <th data-field="statename">State</th>
               <th data-field="description">Description</th>
               <th data-field="action">Action</th>
           </thead>
       </table>
      </div>
    </div>


    <div id="myModal" class="modal fade">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                    <h4 class="modal-title" id="my-modal-title">Confirmation</h4>
                </div>
                <div class="modal-body">
                    <p id="my-modal-message">Do you want to save changes you made to document before closing?</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id='my-modal-cancel-btn'>Cancel</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal" id='my-modal-confirm-btn'>Shutdown</button>
                </div>
            </div>
        </div>
    </div>


  </body>

</html>
